import React, { forwardRef } from 'react';
import TrafficFlowPrediction from '../traffic-flow-prediction/traffic-flow-prediction';
import TrafficCapacityPanel from '../traffic-capacity-panel/traffic-capacity-panel';
import './index.scss';

export interface HomepageRightPanelProps {
  /**
   * 组件宽度
   */
  width?: string | number;

  /**
   * 组件高度
   */
  height?: string | number;

  /**
   * 是否禁用响应式缩放
   */
  noResponsiveScale?: boolean;

  /**
   * 自定义样式
   */
  style?: React.CSSProperties;

  /**
   * 自定义类名
   */
  className?: string;

  /**
   * 流量预测组件配置
   */
  trafficFlowPrediction?: {
    statusBar?: {
      title?: string;
      subtitle?: string;
    };
    dataStats?: any;
    dayChartTitle?: {
      title?: string;
    };
    lineChart?: any;
  };

  /**
   * 交通运力面板配置
   */
  trafficCapacityPanel?: {
    statusBar?: {
      title?: string;
      subtitle?: string;
    };
    trafficChart?: any;
  };

  // 低代码平台相关属性
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const HomepageRightPanel = forwardRef<HTMLDivElement, HomepageRightPanelProps>(({
  width = 500,
  height = 1000,
  noResponsiveScale = true,
  style = {},
  className = '',
  trafficFlowPrediction = {},
  trafficCapacityPanel = {},
  __designMode,
  componentId,
  _componentName,
  forwardRef: forwardRefProp,
  ...otherProps
}, ref) => {

  const componentStyle: React.CSSProperties = {
    width: typeof width === 'number' ? `${width}px` : width,
    height: typeof height === 'number' ? `${height}px` : height,
    ...style
  };

  const classNames = [
    'hzdz-homepage-right-panel',
    noResponsiveScale ? 'no-responsive-scale' : '',
    className
  ].filter(Boolean).join(' ');

  // 计算子组件的宽高
  const containerWidth = typeof width === 'number' ? width : 500;
  const containerHeight = typeof height === 'number' ? height : 1000;

  // 预测模块占60%高度，运力模块占40%高度
  const topSectionHeight = Math.floor(containerHeight * 0.6);
  const bottomSectionHeight = Math.floor(containerHeight * 0.4);

  return (
    <div
      ref={ref}
      className={classNames}
      style={componentStyle}
      data-component-id={componentId}
      data-component-name={_componentName}
      data-design-mode={__designMode}
      {...otherProps}
    >
      {/* 上半部分：流量预测 */}
      <div className="top-section">
        <TrafficFlowPrediction
          width={containerWidth}
          height={topSectionHeight}
          noResponsiveScale={noResponsiveScale}
          {...trafficFlowPrediction}
          __designMode={__designMode}

        />
      </div>

      {/* 下半部分：交通运力图面板 */}
      <div className="bottom-section">
        <TrafficCapacityPanel
          width={containerWidth}
          height={bottomSectionHeight}
          noResponsiveScale={noResponsiveScale}
          {...trafficCapacityPanel}
          __designMode={__designMode}
        />
      </div>
    </div>
  );
});

HomepageRightPanel.displayName = 'HomepageRightPanel';

export default HomepageRightPanel;